<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="visible"
      :title="isAdd?'新增活动':'修改活动'"
    >
      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="150px"
        :rules="rules"
      >
        <el-form-item label="兑换形式:" prop="type">
          <el-radio-group v-model="dataForm.type">
            <el-radio :label="1">资源兑换</el-radio>
            <el-radio :label="2">资源竞拍</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="资源等级:" prop="resourceGrade">
          <el-radio-group v-model="dataForm.resourceGrade">
            <el-radio :label="1">白银资源</el-radio>
            <el-radio :label="2">黄金资源</el-radio>
            <el-radio :label="3">钻石资源</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属项目:" prop="appLabel">
          <el-select v-model="dataForm.appLabel" placeholder="请选择">
            <el-option
              v-for="item in appLabel"
              :key="item.id"
              :label="item.labelName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所需人数:" prop="memberNum">
          <el-input v-model="dataForm.memberNum" placeholder="请输入所需人数（不可为0）"></el-input>
        </el-form-item>
        <el-form-item label="点击量:" prop="clickNum">
          <el-input v-model="dataForm.clickNum" placeholder="请输入点击量"></el-input>
        </el-form-item>
        <el-form-item label="群库内资源类型:" prop="resourceType">
          <el-radio-group v-model="dataForm.resourceType" :disabled="true">
            <el-radio :label="1">群二维码</el-radio>
            <el-radio :label="2">个人二维码</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="dataForm.type === 1">
          <el-form-item label="兑换所需积分:" prop="basePoint">
            <el-input v-model="dataForm.basePoint" placeholder="请输入兑换所需积分"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <template>
              <el-date-picker
                style="width:250px;"
                v-model="dataForm.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
                :disabled="!isAdd&&dataForm.status?dataForm.status === '进行中':false"
              ></el-date-picker>
            </template>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="起拍积分:" prop="basePoint">
            <el-input v-model="dataForm.basePoint" placeholder="请输入起拍积分"></el-input>
          </el-form-item>
          <el-form-item label="加价幅度:" prop="increasePoint">
            <el-input v-model="dataForm.increasePoint" placeholder="请输入加价幅度"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
            <template>
              <el-date-picker
                style="width:250px;"
                v-model="dataForm.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
                :disabled="dataForm.status?dataForm.status === '进行中':false"
              ></el-date-picker>
            </template>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <template>
              <el-date-picker
                style="width:250px;"
                v-model="dataForm.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="结束时间"
              ></el-date-picker>
            </template>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          id: '',
          type: 1,
          resourceGrade: '',
          resourceType: 1,
          startTime: '',
          endTime: '',
          appLabel: '',
          clickNum: '',
          status: ''
        },
        appLabel: [],
        rules: {},
        isAdd: true,
        lock: true,
        successMemberNum: ''
      }
    },
    mounted() {
      this.getAppLabel()
    },
    methods: {
      init(groupCollectionId, id) {
        this.visible = true
        this.$nextTick(() => {
          this.dataForm = {
            id: '',
            type: 1,
            resourceGrade: '',
            resourceType: 1,
            startTime: '',
            endTime: '',
            appLabel: '',
            clickNum: '',
            status: '',
            groupCollectionId: groupCollectionId
          }
        })
        if(id) {
          this.isAdd = false
          this.$http({
            url: this.$http.adornUrl(`/point/groupcollectionactivity/info/${id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm = data.groupCollectionActivity
              this.dataForm.appLabel = parseInt(data.groupCollectionActivity.appLabel)
              this.successMemberNum = data.groupCollectionActivity.successMemberNum
            }
          })
        } else {
          this.isAdd = true
          this.dataForm.id = ''
        }
      },
      getAppLabel() {
        this.$http({
          url: this.$http.adornUrl('/point/applabel/list'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.appLabel = data.appLabelList
          }
        })
      },
      // 判断rules
      setRules(type) {
        if(type === 1) {
          this.rules = {
            type: [
              { required: true, message: '请选择兑换形式', trigger: 'blur' }
            ],
            resourceGrade: [
              { required: true, message: '请选择资源等级', trigger: 'blur' }
            ],
            basePoint: [
              { required: true, message: '请填写兑换所属积分', trigger: 'blur' }
            ],
            memberNum: [
              { required: true, message: '请填写所需人数', trigger: 'blur' },
            ],
            clickNum: [
              { required: true, message: '请填写点击量', trigger: 'blur' }
            ],
            resourceType: [
              { required: true, message: '请选择群库内资源类型', trigger: 'blur' }
            ],
            appLabel: [
              { required: true, message: '请选择所属项目', trigger: 'blur' }
            ],
            startTime: [
              { required: true, message: '请选择开始时间', trigger: 'blur' }
            ]
          }
        } else {
          this.rules = {
            type: [
              { required: true, message: '请选择兑换形式', trigger: 'blur' }
            ],
            resourceGrade: [
              { required: true, message: '请选择资源等级', trigger: 'blur' }
            ],
            basePoint: [
              { required: true, message: '请填写起拍积分', trigger: 'blur' }
            ],
            increasePoint: [
              { required: true, message: '请填写加价幅度', trigger: 'blur' }
            ],
            memberNum: [
              { required: true, message: '请填写所需人数', trigger: 'blur' }
            ],
            clickNum: [
              { required: true, message: '请填写点击量', trigger: 'blur' }
            ],
            resourceType: [
              { required: true, message: '请选择群库内资源类型', trigger: 'blur' }
            ],
            appLabel: [
              { required: true, message: '请选择所属项目', trigger: 'blur' }
            ],
            startTime: [
              { required: true, message: '请选择开始时间', trigger: 'blur' }
            ],
            endTime: [
              { required: true, message: '请选择结束时间', trigger: 'blur' }
            ]
          }
        }
      },
      dataFormSubmit() {
        if(this.lock) {
          this.lock = false
          this.setRules(this.dataForm.type)
          let url = ''
          if(this.dataForm.id) {
            if(this.dataForm.type === 1) {
              url = '/point/groupcollectionactivity/updateExchangeActivity'
            } else {
              url = '/point/groupcollectionactivity/updateAuction'
            }
          } else {
            if(this.dataForm.type === 1) {
              url = '/point/groupcollectionactivity/saveExchangeActivity'
            } else {
              url = '/point/groupcollectionactivity/saveAuctionActivity'
            }
          }
          if (this.successMemberNum && this.dataForm.memberNum<this.successMemberNum) {
            this.$message.error('所需人数不能小于已参加人数')
            this.dataForm.memberNum = ''
            this.lock = true
            return false
          }
          this.$http({
            url: this.$http.adornUrl(url),
            method: 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({data}) => {
            this.lock = true
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              });
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      }
    }
  }
</script>
<style scoped>

</style>
